<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/user.css" />
		<style type="text/css">
			img {
				width: 100%;
				height: 100%;
			}
			#photo-box {
				width: 100%;
				height: 100%;
			}
		</style>
	</head>

	<body>
		<div id="photo-box">
		</div>sdfs
		<div id="showEdit">
			<header class="mui-bar mui-bar-nav mui-nav-bg" style="background:none; position:absolute; top:0;">
				<a class="mui-icon iconfont icon-roundclosefill mui-pull-left" style="color:#ffffff; font-size:36px;" onclick="closeEdit();">sdfasfd</a>
				<a class="mui-icon iconfont icon-roundcheckfill mui-pull-right" style="color:#ffffff; font-size:36px;" onclick="confirm();">asdfasfd</a>
			</header>
			<div id="report"></div>
		</div>
	</body>

</html>
<script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/caijia/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/caijia/cropper.js" type="text/javascript" charset="utf-8"></script>
<script src="js/zepto_1.1.3.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	mui.plusReady(function() {
		window.addEventListener('localUrl', function(event) {
			var loaclUrl = event.detail.localUrl;
			$("#report").html('');
			$("#report").html('<img src=' + loaclUrl + ' />')
			cutImg();
			mui('#picture').popover('toggle');
		})

		function cutImg() {
			$("#showEdit").fadeIn();
			var $image = $('#report > img');
			$image.cropper({
				aspectRatio: 1 / 1,
				autoCropArea: 0.8
			});
		}

		function confirm() {
			$("#showEdit").fadeOut();
			var $image = $('#report > img');
			var dataURL = $image.cropper("getDataURL");
			$("#changeAvatar").html('<img src="/static/css/default/img/default.jpg" data-original="' + dataURL + '" />');
		}

		function postAvatar() {
			var $image = $('#report > img');
			var dataURL = $image.cropper("getDataURL");
			var data = {
				base64: dataURL
			};
			$.post(url, data, function(data) {
				//这里就自己写了哈
			});
		};
	})
</script>